<!--活动列表-->
<template>
  <div class="ele-body">
    <el-form
      :hide-required-asterisk="true"
      ref="form"
      :model="form"
      label-width="74px"
      @keyup.enter.native="submit"
      @submit.native.prevent
    >
      <el-card>
        <div class="flex-between keyword-top">
          <div class="keyword-title">活动列表</div>
          <!--<el-radio-group v-model="saleSearch.dateType" @change="onSearchTypeChange">
            <el-radio-button :label="0">全部</el-radio-button>
            <el-radio-button :label="1">昨天</el-radio-button>
            <el-radio-button :label="0">今天</el-radio-button>
            <el-radio-button :label="2">一周内</el-radio-button>
            <el-radio-button :label="3">一个月内</el-radio-button>
          </el-radio-group>-->
        </div>
        <el-row :gutter="15" class="row-cls">
          <el-col :xs="8" :sm="8" :lg="8" :xl="8" v-for="(i,j) in list" :key="j">
            <div class="flex-column screen-num">
              <span>{{i.text}}</span>
              <div>{{i.num}}</div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="15" class="flex-align-center m-bottom20">
          <el-col :xs="12" :sm="12" :lg="6" :xl="6">
            <el-form-item label="活动名称" style="margin-bottom: 0">
              <el-input
                v-model="form.activityName"
                placeholder="请输入活动名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <!--<el-col :xs="12" :sm="12" :lg="6" :xl="6">
            <el-form-item label="关联创作" style="margin-bottom: 0">
              <el-input
                v-model="form.videoMaterial"
                placeholder="请输入创作剪辑"
                clearable
              />
            </el-form-item>
          </el-col>-->
          <el-col :xs="12" :sm="12" :lg="6" :xl="6">
            <el-form-item label="发布类型" style="margin-bottom: 0">
              <el-select
                clearable
                class="ele-block"
                v-model="form.releaseChannel"
                placeholder="请选择发布类型"
              >
                <!--releaseChannel：1 抖音 2 视频号 3 K手*-->
                <el-option label="D音" :value="1" />
                <el-option label="K手" :value="3" />
                <el-option label="视频号" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="6" :xl="6">
            <el-form-item label="创建时间" style="margin-bottom: 0">
              <el-date-picker
                v-model="datetime"
                type="daterange"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                class="ele-fluid"
                @change="select"
              />
            </el-form-item>
          </el-col>
<!--        </el-row>-->
<!--        <el-row :gutter="15">-->
          <el-col :xs="12" :sm="12" :lg="6" :xl="6" class="m-left10">
<!--          <el-col :xs="24" :sm="24" :lg="24" :xl="24" class="m-left10">-->
            <el-button
              icon="el-icon-zoom-out"
              size="small"
              type="primary"
              class="colorBlue"
              @click="see()"
            >
              查询
            </el-button>
            <el-button
              icon="el-icon-refresh-right"
              size="small"
              class="resetting-btn"
              @click="resetting()"
            >
              重置
            </el-button>
          </el-col>
        </el-row>
        <div class="flex-align-center padding34">
          <div v-for="(i,j) in typeList" :key="j" :class="typeIndex == j ? 'sel-title-class' : 'title-class'" class="default" @click="typeClick(j)">{{i.name}}</div>
        </div>
        <excel-export ref="table" :activityList="form" @infoAll="infoAll" />
      </el-card>
    </el-form>
  </div>
</template>

<script>
  import ExcelExport from './components/excel-export.vue';
  export default {
    name: "index",
    components: { ExcelExport },
    data() {
      return {
        // 销售量搜索参数
        saleSearch: {
          type: 'reserveOrder',
          dateType: 1,
          datetime: ''
        },
        list:[
        {
          text:'曝光量',
          num:0
        },{
          text:'点赞数',
          num:0
        },{
          text:'评论数',
          num:0
        },
      ],
        datetime:[],
        typeIndex:0,
        typeList: [
          {
            name:'视频快推',
            id:1
          },
          {
            name:'幸运大转盘',
            id:2
          },
          {
            name:'幸运九宫格',
            id:3
          },
          {
            name:'卡券活动',
            id:4
          },
          {
            name:'爆客机设备',
            id:5
          },
        ],
        activityList:[],
        // 省市
        provinceCity:'',
        // 表单提交状态
        loading: false,
        // 表单数据
        form: {
          id:this.$store.state.user.info.merchantId
          // username:this.$store.state.user.info.username,
          // limit:10,
          // page:1,
        },
      }
    },
    created(){
      this.typeClick(0)
    },
    methods:{
      infoAll(info){
        console.log('组件emit 返回总数e',info)
          this.list[0].num=info.viewCount   // 曝光量
          this.list[1].num=info.likeCount   // 点赞数
          this.list[2].num=info.commentCount   // 评论数
      },
      // 查询日期
      select(e){
        console.log("日期选择e============",e,'form.datetime',this.datetime)
        if(this.datetime){
          Object.assign( this.form, {
            startTime:  this.datetime[0],
            endTime:  this.datetime[1]
          })
        }
      },
      // 切换 ‘发布活动’
      typeClick(e){
        this.typeIndex=e
        this.form.activityType=this.typeList[e].id
        this.query()
      },
      // 查询
      see(){
        if(!this.form.activityName){
          delete this.form.activityName
        }
        if(!this.form.videoMaterial){
          delete this.form.videoMaterial
        }
        if(!this.datetime){
          this.datetime=''
          delete this.form.startTime
          delete this.form.endTime
        }
        this.query()
      },
      // 重置
      resetting(){
        this.datetime=''
        delete this.form.startTime
        delete this.form.endTime
        delete this.form.type
        // 查询为空则会删除
        this.form.activityName=''
        this.form.videoMaterial=''
        delete  this.form.releaseChannel
        this.query()
      },
      // 查询矩阵账号【分页查询】
      query(){
        if(!this.form.videoMaterial){
          delete this.form.videoMaterial
        }
        if(!this.form.activityName){
          delete this.form.activityName
        }
        this.$nextTick(() => {
          console.log('this.$refs[\'table\']',this.$refs['table'])
          this.$refs['table'].reload()
        })
      },
    }
  }
</script>

<style scoped lang="less">
  .row-cls{
    border-bottom: 1px solid #F0F2F5 ;
    margin : 10px 0 24px
  }
  .screen-num{
    margin-bottom: 20px ;
    span{
      color: #666;
    }
    div{
      color: #1E6CEB;
      font-size: 24px;
      margin-top: 10px;
    }
  }
  .keyword-top{
    padding:4px 4px 20px;
    .keyword-title{
      font-size: 20px;
      line-height: 24px;
      margin-right: 20px;
      color: #000000;
    }
    .border{
      border-radius: 5px;
      overflow: hidden;
      .no-select-type,.select-type{
        width: 68px;
        height: 29px;
      }
      .select-type{
        background: #1E6CEB;
        color: #FFFFFF;
      }
      .no-select-type{
        border: 1px solid #F5F5F5;
        color: #ABAFB5;
      }
    }
  }
  .resetting-btn{
    background: #F5F5F5;
  }
  /* 快推/大转盘/九宫格/卡券 切换 */
  .padding34{
    padding: 34px 0;
    .title-class,.sel-title-class{
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 21px;
      width: 114px;
      height: 35px;
      border-radius: 5px;
    }
    .title-class{
      color: #757575;
      background: #FAFAFC;
    }
    .sel-title-class{
      color: #1E6CEB;
      background: #DDF0FF;
    }
  }

</style>

